<template>
    <div>
        <div class="tableHeadBox">
            <div class="buttonBox">
                <el-button class="addButton" type="primary" size="small" @click="ClickAdd">添加楼栋</el-button>
            </div>
            <div class="searchBox">
                <el-button class="openMapButton" color="#626aef" type="primary" size="small"
                    @click="ClickOpenMap">在地图中查看所有建筑</el-button>
                <el-input class="searchInput" v-model="searchStr" size="small" placeholder="请输入楼栋"></el-input>
                <el-button class="searchButton" type="primary" size="small" :icon="Search">搜索</el-button>
            </div>
        </div>

        <!--#region 列表 -->
        <div class="tableBox">
            <el-table :data="filterTableData" height="100%" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="name" label="楼栋名称"></el-table-column>
                <el-table-column prop="academician.name" label="所属学院"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.academician.state">已启用</el-tag>
                        <el-tag type="info" v-else>未启用</el-tag>
                    </template>
                </el-table-column>
                <!-- 按钮 -->
                <el-table-column fixed="right" label="操作" width="530">
                    <template #default="scope">
                        <el-button round color="#626aef" type="primary" size="small"
                            @click="ClickViewLoaction(scope.$index, scope.row)">查看位置</el-button>
                        <el-button round type="success" size="small"
                            @click="ClickViewDetail(scope.$index, scope.row)">查看详情</el-button>
                        <el-button round type="warning" size="small"
                            @click="ClickEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button round type="danger" size="small"
                            @click="ClickDelete(scope.$index, scope.row)">删除</el-button>
                        <el-button round type="info" size="small"
                            @click="ClickThree()">模型</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- #endregion -->
    </div>

    <!--#region 楼栋编辑/添加弹窗 -->
    <el-dialog v-model="dialogVisible" :title="currentBuilding == null ? '添加楼栋' : '编辑楼栋'" width="500" top="30vh"
        :close-on-press-escape="false">
        <BuildingForm v-if="dialogVisible" :Close="Close" :transmitObj="currentBuilding"></BuildingForm>
    </el-dialog>
    <!-- #endregion -->

    <!--#region 打卡地图 -->
    <el-dialog v-model="dialogVisible2" title="宇宙无敌霹雳地图" width="1000" top="3vh" :close-on-press-escape="false">
        <BuildingMap v-if="dialogVisible2" :Close="Close" :transmitObj="transmitBuildings"></BuildingMap>
    </el-dialog>
    <!-- #endregion -->

    <!--#region 三维模型 -->
    <el-dialog v-model="dialogVisible3" title="宇宙无敌霹雳模型" width="1500" height="1500" top="3vh" :close-on-press-escape="false">
        <Three v-if="dialogVisible3"></Three>
    </el-dialog>
    <!-- #endregion -->
</template>

<script setup>
import service from '@/request';
import '../assets/css/table.css'
import { Search } from '@element-plus/icons-vue'
import { onBeforeMount, reactive, ref, nextTick, watch, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import BuildingForm from '@/components/Building/BuildingForm.vue';
import BuildingMap from '@/components/Building/BuildingMap.vue';
import Three from '../components/Three/Three.vue';

//显示提示
async function ShowTip(isSuccess, msg) {
    if (isSuccess == true) {
        ElMessage({ message: msg, type: 'success' })
    }
    else {
        ElMessage({ message: msg, type: 'error' })
    }
}


//搜索
let searchStr = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !searchStr.value ||
            data.name.toLowerCase().includes(searchStr.value.toLowerCase())
    )
)


//获取数据
let tableData = reactive([])
async function getDataList() {
    let resultData = []
    await service.get("/Building/getAllBuilding").then(
        (res) => {
            resultData.push(...res.value)
        }
    )
    return resultData
}


//添加/编辑楼栋
let currentBuilding = null;
let dialogVisible = ref(false)
async function ClickAdd() {
    currentBuilding = null;
    dialogVisible.value = true;
}
async function ClickEdit(index, row) {
    currentBuilding = row;
    dialogVisible.value = true;
}
async function Close() {
    currentBuilding = null;
    dialogVisible.value = false;
    await Reload()
}


//打开地图
let dialogVisible2 = ref(false)
let transmitBuildings = []
//查看所有建筑位置
async function ClickOpenMap() {
    transmitBuildings.length = 0
    transmitBuildings.push(...await getDataList())
    dialogVisible2.value = true;
}
//查看指定建筑位置
async function ClickViewLoaction(index, row) {
    transmitBuildings.length = 0
    transmitBuildings.push(row)
    dialogVisible2.value = true;
}


//详细
async function ClickViewDetail() {

}



//删除
async function ClickDelete(index, row) {
    await ElMessageBox.confirm(
        '你确定要这么做吗，这样做将无法撤回?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(
        async () => {
            service.delete("Building/deteltBuilding?buildindId=" + row.id).then(
                async res => {
                    ShowTip(true, '删除成功')
                    await Reload()
                },
                error => {
                    ShowTip(false, '删除失败')
                }
            )
        })
        .catch(() => {
            ShowTip(false, '取消删除')
        })
}


async function Reload() {
    tableData.length = 0
    tableData.push(...await getDataList())
}

onBeforeMount(async () => {
    await Reload()
})

let dialogVisible3 = ref(false)

//打开三维模型
function ClickThree()
{
    dialogVisible3.value = true;
}
</script>

<style scoped>
.el-radio {
    margin-top: 10px;
    width: 250px;
}

.openMapButton {
    margin-right: 30px;
}

.buttonBox {
    float: left;
    height: 40px;
    padding-top: 10px;
    margin-left: 20px;
}

.searchInput,
.addInput {
    width: 200px;
}

.searchButton,
.addButton {
    margin-left: 10px;
}
</style>